<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.10.2.js"></script>
<title>Документ без названия</title>
</head>

<body>
<style type="text/css">
 .slide {
 z-index: 9;
 width: 700px;
 height: 500px;
 overflow: hidden;
 margin: 0 0 7px;
 position: relative;
 }
 .slide ul,
 .slide li {
 padding: 0;
 margin: 0;
 list-style-type: none;
 }
 
 .slide ul li {
 list-style-type: none;
 float: left;
 width: 700px;
 height: 300px;
 }
 .slide .navig {
 position: absolute;
 left: 280px;
 top: 380px; 
 }
 .slide ul {
		width: 999999999px; }
 
 .slide .navig span {
 opacity: 0.9;
 background: #fff;
 margin: 0 10px 0px 0px;
 width: 6px;
 height: 6px;
 border-radius: 8px;
 cursor: pointer;
 overflow: hidden;
 display: block;
 float: left;
 box-shadow: 0 1px 2px #000;
 }
 .slide .navig span.start {
 background: blue;
 
 }
 </style>
<div class="slide">
<ul>
<li><img src="voda.jpg" /></li>
<li><img src="vodichka.jpg" /></li>
<li><img src="Water.jpg" /></li>
</ul>
</div>
<script>
$(document).ready(function(e) {
    $(".slide").each(function() //обращаемся к каждой картинке
	 {
        var picture = $(this);
		$(picture).append("<div class='navig'></div>");
		$(picture).find("li").each(function() {
            $(picture).find(".navig").append("<span src='"+$(this).index()+"'></span>");
			$(this).addClass("slide"+$(this).index());
        });
		$(picture).find("span").first().addClass("start"); //двигаем первую штуку
    });
});
function slider (picture, sld)
{
	var ul = $(sld).find("ul"); // это слайд
	var block = $(sld).find("li.slide"+picture); //это картинка
	var wdth = $(block).width();
	$(ul).animate({marginLeft: "-"+wdth*picture}, 500);
	}

	
	$(document).on("click", ".slide .navig span", function()
	{
		var sld = $(this).closest(".slide");
		$(sld).find("span").removeClass("start");
		$(this).addClass("start");
		var picture = $(this).attr("src");
		slider (picture, sld);
		return false;
       
		});
	
</script>

</body>
</html>
